<template>
  <view class="top-bar">
    <view class="top-bar-box">
      <view
        class="top-bar-item"
        @click="handleItem(item)"
        v-for="(item, index) in tabs"
        :class="actives.includes(item.key) && 'active-color'"
        :key="index"
        >{{
          item.options
            ? item.options.find((v) => v.value === item.default).label
            : item.label
        }}
        <image
          class="icon"
          v-if="item.options"
          :src="
            actives.includes(item.key)
              ? require('@/static/xiala.png')
              : require('@/static/xiala1.png')
          "
        />
      </view>
    </view>
    <view class="select-box" v-if="openSelect">
      <view
        @click="handleSubItem(v)"
        class="select-item"
        v-for="(v, i) in selectOptions"
        :key="i"
      >
        <text :class="curItem.default === v.value && 'active-color'">{{
          v.label
        }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      openSelect: true,
      selectOptions: [],
      actives: [],
      curItem: {},
    };
  },
  methods: {
    handleItem(item) {
      const optionKeys = this.tabs.filter((v) => v.options).map((v) => v.key);
      this.actives =
        this.actives.includes(item.key) && !item.options
          ? this.actives.filter((v) => v !== item.key)
          : [...this.actives, item.key];
      if (item.options) {
        this.selectOptions = item.options;
        this.openSelect =
          this.curItem.key === item.key ? !this.openSelect : true;
      } else {
        this.openSelect = false;
        //取消所有options的选中
        this.actives = this.actives.filter((v) => !optionKeys.includes(v));
        this.$emit("handleItem", {
          type: "item",
          key: item.key,
          value: this.actives.includes(item.key),
        });
      }
      this.curItem = item;
    },
    handleSubItem(item) {
      this.openSelect = false;
      this.$emit("handleItem", {
        type: "subItem",
        key: this.curItem.key,
        value: item.value,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-shadow: 0 0 8px 0 rgba($color: #000000, $alpha: 0.15);
  .top-bar-box {
    padding: 20rpx 30rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .top-bar-item {
    font-weight: normal;
    font-size: 26rpx;
    color: #333;
    display: flex;
    align-items: center;
    .icon {
      width: 20rpx;
      height: 20rpx;
      margin-left: 2rpx;
    }
  }
  .active-color {
    color: #5cc39d;
  }
  .select-box {
    background-color: rgba($color: #000000, $alpha: 0.1);
    .select-item {
      font-size: 26rpx;
      padding: 30rpx;
      border-bottom: 1px solid #e6e6e6;
      background-color: #fff;
    }
  }
}
</style>
